<script>
import { reactive, toRefs, ref, getCurrentInstance } from "vue";

import Table from "./components/Table.vue";
import MallModel from "../../components/3DModel/MallModel.vue";
export default {
  components: { Table, MallModel },
  setup() {
    const state = reactive({
      total: 0,
      pageSize: 10,
      tableData: [],
      tableLabel: ["enterpriseName", "epChargePerson", "epLicense", "epTelephone", "epType", "srArea", "srHireEnd", "srHireStart", "srHireTime", "srModelName", "srName", "srPosPlaneX", "srPosPlaneY", "srPostFloor", "srRecId", "srRem", "srState", "storeId"],
      formDataPost: ["enterpriseName", "epChargePerson", "epLicense", "epTelephone", "epType", "srArea", "srHireEnd", "srHireStart", "srHireTime", "srModelName", "srName", "srPosPlaneX", "srPosPlaneY", "srPostFloor", "srRecId", "srRem", "srState", "storeId"],
      mapLabel: { "enterpriseName": "企业名称", "epChargePerson": "企业负责人", "epLicense": "企业许可证", "epTelephone": "企业电话", "epType": "企业类型", "srArea": " 店铺面积", "srHireEnd": "店铺租赁结束时间", "srHireStart": "店铺租赁开始时间", "srHireTime": "店铺租赁时长", "srModelName": "店铺型号名称", "srName": "店铺名称", "srPosPlaneX": "店铺平面坐标-X", "srPosPlaneY": "店铺平面坐标-Y", "srPostFloor": "店铺所在楼层", "srRecId": "店铺记录-ID", "srRem": "店铺备注", "srState": "店铺状态", "storeId": "店铺所属的商场-ID" },
      formDataPost: ["enterpriseName", "epChargePerson", "epLicense", "epTelephone", "epType", "srArea", "srHireEnd", "srHireStart", "srHireTime", "srModelName", "srName", "srPosPlaneX", "srPosPlaneY", "srPostFloor", "srRecId", "srRem", "srState", "storeId"],
      formDataGet: ["enterpriseName", "epChargePerson", "epLicense", "epTelephone", "epType", "srArea", "srHireEnd", "srHireStart", "srHireTime", "srModelName", "srName", "srPosPlaneX", "srPosPlaneY", "srPostFloor", "srRecId", "srRem", "srState", "storeId"],
      formDataPut: ["enterpriseName", "epChargePerson", "epLicense", "epTelephone", "epType", "srArea", "srHireEnd", "srHireStart", "srHireTime", "srModelName", "srName", "srPosPlaneX", "srPosPlaneY", "srPostFloor", "srRecId", "srRem", "srState", "storeId"],
      flowData: [
        { name: "02ZARA", flow: 10000, type: 1 }, //0--未出租 1--已出租
        { name: "02TATA", flow: 5000, type: 1 },
        { name: "02AIGLE", flow: 0, type: 0 },
      ],
    });

    const mallModelRef = ref();
    const tableRef = ref();

    const cellClick = (row) => {
      mallModelRef.value.selectTable(row.店铺名称);
    };

    const { proxy } = getCurrentInstance();

    const getTableData = async (currentPage, queryKey) => {
      const params = {
        pageNum: currentPage,
        pageSize: state.pageSize
      }
      const data = await proxy.$API.sysConfig.sysStoreList.get(params)
      state.total = data.total
      state.tableData = data.rows
    };

    const postTableData = async (data) => {
      const res = await proxy.$API.sysConfig.sysStorePost.post(data)
      if (res.code == 200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    const deleteTableData = async (data) => {
      const params = {
        id: data.srRem,
      }
      const res = await proxy.$API.sysConfig.sysStoreDelete.delete(params)
      if (res.code == 200) {
        //调用成功
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(data.msg);
      }
    };

    const putTableData = async (row, data) => {

      const res = await proxy.$API.sysConfig.sysStorePut.put(data)

      if (res.code == 200) {
        //调用成功
        tableRef.value.dialogVisible = false;
        ElMessage.success({
          message: "成功",
          type: "success",
        });
        getTableData(1)
      } else {
        //调用失败
        ElMessage.error(res.msg);
      }
    };

    return { ...toRefs(state), mallModelRef, tableRef, getTableData, postTableData, deleteTableData, putTableData, cellClick };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never" class="model-warpper">
      <MallModel ref="mallModelRef" :formDataPost="formDataPost" :formDataPut="formDataPut" :flowData="flowData"
        :mapLabel="mapLabel" />
    </el-card>


    <el-card shadow="never" style="margin-top: 20px">
      <Table ref="tableRef" deleteButton :tableLabel="tableLabel" :tableData="tableData" :mapLabel="mapLabel"
        :total="total" :pageSize="pageSize" :formDataPost="formDataPost" :formDataPut="formDataPut"
        :formDataGet="formDataGet" @getTableData="getTableData" @postTableData="postTableData"
        @deleteTableData="deleteTableData" @putTableData="putTableData" @cell-click="cellClick" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}

.model-warpper {
  width: 100%;
  height: 600px;
}
</style>